<template>
    <div>
        <div v-if="!edit">
            <van-cell title="真实姓名" :value="userInfo.real_name"/>
            <van-cell title="电话号码" :value="userInfo.phone"/>
            <van-cell title="身份证号码" :value="userInfo.idcard"/>
            <van-cell title="开户银行" :value="userInfo.bank_name"/>
            <van-cell title="银行账号" :value="userInfo.bank_code"/>
            <van-cell title="开户地址" :value="userInfo.bank_addr"/>
        </div>
        <div v-if="edit">
            <van-cell-group>
                <van-field label="真实姓名" v-model="form.real_name" placeholder="请输入真实姓名"/>
                <van-field label="开户银行" v-model="form.bank_name" placeholder="请输入开户银行"/>
                <van-field label="银行卡号" v-model="form.bank_code" placeholder="请输入银行卡号"/>
                <van-field label="开户行地址" v-model="form.bank_addr" placeholder="请输入开户行地址"/>
                <van-field label="身份证" v-model="form.idcard" maxlength="18" placeholder="请输入身份证"/>
                <van-field label="手机号" v-model="form.phone" type="number" maxlength="11" placeholder="请输入手机号"/>
                <van-field label="二级密码" v-model="form.pwd2" type="password" placeholder="设置二级密码"/>
            </van-cell-group>

        </div>
        <div class="btn-box" v-if="!userInfo.real_name">
            <van-button class="btn" size="large" @click="submit">{{edit?'保存':'编辑'}}</van-button>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex"
    import md5 from "js-md5"

    export default {
        data() {
            return {
                edit: false,
                form: {
                    real_name: '',
                    bank_name: '',
                    bank_code: '',
                    bank_addr: '',
                    idcard: '',
                    phone: '',
                    pwd2: ''
                }
            }
        },
        computed: {
            ...mapGetters(['userInfo'])
        },
        methods: {
            submit() {
                if (!this.edit) {
                    this.edit = true
                    for (let i in this.form) this.form[i] = this.userInfo[i]
                    console.log(this.userInfo)
                    return
                }
                if (this.form.real_name == '') return this.fail('真实姓名不能为空')
                if (this.form.bank_name == '') return this.fail('开户银行不能为空')
                if (this.form.bank_code == '') return this.fail('银行卡号不能为空')
                if (this.form.bank_addr == '') return this.fail('开户行地址不能为空')
                if (this.form.idcard == '') return this.fail('身份证不能为空')
                if (this.form.phone == '') return this.fail('手机号不能为空')
                if (this.validatePhone(this.form.phone)) return this.fail('请输入正确的手机号码')
                if (this.form.pwd2 == '') return this.fail('二级密码不能为空')
                this.$store.dispatch(types.USER_INFO_EDIT, this.form).then(res => {
                    console.log(res)
                    if (res.code !== 0) return this.fail(res.msg)
                    this.success('编辑成功')
                    this.edit = false
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .submit-ul {
        background-color: #fff;
        margin-top: 10px;

    }

    .submit-goods-li {
        height: 40px;
        border-bottom: 1px solid #efefef;
        input {
            width: 70%;
            height: 100%;
            text-align: right;
        }
    }

    .van-cell {
        font-size: 14px;
    }
</style>